<template>
	<view class="containers">
		<view class="input-group">
			<input class="input" placeholder="用户名">
		</view>
		<!-- F2:密码输入框组 -->
		<view class="input-group">
			<!-- 注意:小程序/uni-app中的input的type没有password选项 -->
			<input class="input" placeholder="注册密码" type="safe-password" :password="hidePwd">
			<uni-icons :type="hidePwd?'eye-slash-filled':'eye-filled'" size="24" color="#666" @click="hidePwd=!hidePwd"></uni-icons>
		</view>
		<view class="input-group">
			<!-- 注意:小程序/uni-app中的input的type没有password选项 -->
			<input class="input" placeholder="再次输入密码" type="safe-password" :password="hidePwd">
			<uni-icons :type="hidePwd?'eye-slash-filled':'eye-filled'" size="24" color="#666" @click="hidePwd=!hidePwd"></uni-icons>
		</view>
		<view class="input-group">
			<!-- 注意:小程序/uni-app中的input的type没有password选项 -->
			<input class="input" placeholder="邮箱">
		</view>
		<view class="input-group">
			<!-- 注意:小程序/uni-app中的input的type没有password选项 -->
			<input class="input" placeholder="手机号">
		</view>
		<button class="btn" type="primary">注册</button>
		<text class="jumpToComponent" @click="$emit('showChild',{childName:'login'})">已有账号?现在去登录</text>
	</view>
</template>

<script>
import { userRegister } from '../../service';
	export default {
		name:"xzUserRegister",
		data() {
			return {
				hidePwd:false
			};
		},
		methods: {
			async doRegister() {
				//请求数据
				let data = {uname:'123456',upwd:'123456',email:'123456',phone:'123456'}
				//调用接口方法
				let body = await userRegister(data)
				console.log(body)
			}
		},
		//生命周期方法 -- 组件(不是页面)挂载时
		mounted() {
			uni.setNavigationBarTitle({
				title:'注册新用户'
			})
		}
	}
</script>

<style lang="scss">
.containers{
	position: absolute;
	width: 100%;
	padding: $uni-spacing-col-lg*2 $uni-spacing-row-lg*2;
	.input-group{
		//弹性容器主轴方向:横向
		flex-direction: row;
		//子元素在交叉轴上居中对齐
		align-items: center;
		//下边框
		border-bottom: $uni-border-width $uni-border-style $uni-border-color;
		padding: $uni-spacing-row-sm $uni-spacing-row-sm;
		margin-top: $uni-spacing-col-lg;
		.input{
			flex: 1;
		}
		.separator{
			margin: 0 $uni-spacing-col-base;
		}
	}
	.btn{
		width: 100%;
		margin-top: $uni-spacing-col-lg*2;
		background-color: $uni-color-primary;
		border-radius: $uni-border-radius-lg*10;
	}
	.jumpToComponent{
		margin-top: $uni-spacing-col-lg;
		&:active{
			opacity: $uni-opacity-half;
		}
	}
	
}
</style>